<template>
	<view class="page-value">
		<view class="content">
			<view class="header">
				<view><span style="font-size: 20rpx; font-weight: bold;color:#3c3c3c ;">注意事项：</span><span
						style="font-size: 18rpx; color:#7c7c7c;">此网站为R.E.D胡静怡个人资讯站，不做盈利使用</span></view>
				<view style="font-size: 26rpx; font-weight: bold; color:#3c3c3c ;letter-spacing: 1rpx;" @click="jumpToUrl()">R.E.D</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="tab-line">
				<view><u-image width="200rpx" height="100rpx" :src="logoUrl" mode="aspectFit"></u-image></view>
				<view class="tab-items">
					<view :class="getTabClass(index)" v-for="(item,index) in tabList" @click="chooseTab(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="currentTab==0">
			<jinny-index></jinny-index>
		</view>
		<view v-if="currentTab==1">
			<jinny-view></jinny-view>
		</view>
		<view class="foot">
			备案号：<span @click="toICP">粤ICP备2025384665号-1</span>
		</view>
	</view>

</template>

<script>
	import jinnyIndex from '@/pages/photo/jinnyIndex/jinnyIndex.vue'
	import jinnyView from '@/pages/photo/jinnyView/jinnyView.vue'
	import API from '@/json/json.js'
	export default {
		components: {
			jinnyIndex,
			jinnyView
		},
		data() {
			return {
				logoUrl: "/static/images/logo/indexLogo.png",
				tabList: ["资讯", "舞台", "产出", "活动"],
				currentTab: 0
			}
		},
		// async onShow() {
		// 	uni.hideTabBar()

		// },
		// onPullDownRefresh() {
		// 	this.item = [];
		// 	setTimeout(() => {

		// 		uni.hideNavigationBarLoading();
		// 		// 停止下拉动作
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		methods: {
			getTabClass(index) {
				if (this.currentTab == index) {
					return 'tab-value checked'
				} else {
					return 'tab-value'
				}
			},
			chooseTab(index) {
				if (index > 1) {
					this.$refs.uToast.show({
						message: "该功能尚在开发，敬请期待"
					})
					return;
				}
				this.currentTab = index
			},
			jumpToUrl(){
				window.open("https://www.red-official.cn", "_blank");
			},
			toICP(){
				window.open("https://beian.miit.gov.cn/", "_blank");
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f3f4f6;
	}
	.page-value{
		height: calc(95vh);
	}

	.content {
		width: 750rpx;
		position: relative;
		background-color: white;
		padding-bottom: 20rpx;
		.header {
			width: 750rpx;
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 10rpx;
			border-bottom: 5rpx solid #efefef;
			font-family: "PingFang-SC";
		}

		

		.tab-line {
			width: 675rpx;
			height: 100rpx;
			// padding-left: 50rpx;
			// padding-right: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: auto;
			margin-right: auto;
			.tab-items {
				width: 475rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 30rpx;
			}
			
			.tab-value {
				width: 100rpx;
				margin-left: 10rpx;
				border: 2rpx solid #FF2248;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 5rpx;
				font-size: 24rpx;
				font-family: "PingFang-SC";
			}
			
			.checked {
				color: white;
				background-color: #FF2248;
			}	
		}
	}
	.foot{
		height: 30rpx;
		background-color: white;
		font-size: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>